<template>
  <div class="heat-container">
    <div class="heat-body">
      <div class="content">
          <!-- 遍历attractionList，渲染card组件 -->
          <card @toDetail="_toDetail(item)" v-for="item, index in attractionList" :key="index"
            :image="item.imgList[0] ? base_url + item.imgList[0].attractionPhoto : ''" :title="item.attractionName"
            :city="item.city" :address="item.address" :price="item.price" :openTime="item.openTime"
            :id="item.attractionId"></card>
      </div>
      <div class="pager" style="display: flex;justify-content: center;">
        <!-- 分页组件 -->
        <el-pagination background layout="prev, pager, next,sizes" :total="total" :page-sizes="pageSizes" :current-page="query.pageNum"
          @current-change="changePage" @size-change="sizeChange" :page-size="query.pageSize">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

import { listAttraction, listAttractionImage } from '../../api/system/attraction';
import Cookies from "js-cookie";

import { getUserId } from '../../api/system/user';
import card from '../../layout/components/card.vue';
export default {
  components: { card },
  data() {
    return {
      // 基础url
      base_url: process.env.VUE_APP_BASE_API,

      // 查询参数
      query: {
        pageNum: 1,
        pageSize: 10,
        status: 2,
        categoryId: 0
      },
      pageSizes: [10, 50, 100, 200,],
      // 总数
      total: 0,
      // 景点列表
      attractionList: []
    }
  },
  methods: {
    sizeChange(data) {
      this.query.pageSize = data
      this.listAttraction()
    },
    // 跳转到详情页
    _toDetail(data) {
    localStorage.setItem('data',JSON.stringify(data))
      this.$router.push({
        path: '/user/productDetail',
        query: {
          data: data
        }
      })
    },
    // 换页事件
    changePage(data) {
      this.query.pageNum = data
      this.listAttraction()
    },
    // 获取景点列表
    listAttraction() {
      listAttraction(this.query).then(res => {
        this.total = res.data.total
        const copy = res.data.list.map(item => {
          return Promise.all([
            listAttractionImage({ attractionId: item.attractionId }).catch(err => {
              return null
            })
          ]).then(res1 => ({
            ...item,
            imgList: res1 ? res1[0].data : []
          }))
        })

        Promise.all(copy).then(res => {
          this.attractionList = res
          console.log(this.attractionList);

        }).catch(err => {
          log(err)
        })
      })
    },

  },
  created() {
    // 获取用户id
    getUserId().then(res => {
      console.log(res.data);
      
      Cookies.set("Id",res.data.userId, { expires: 30 });
      
    })
    // 获取景点列表
    this.listAttraction()
  }
}

</script>

<style lang='scss'>
.heat-container {
  display: flex;
  flex-direction: column;
  gap: 100px;




  .heat-body {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;

    .content {
      display: flex;
      flex-wrap: wrap;
      // height: 700px;
      box-sizing: border-box;
      margin-bottom: 30px;
      gap: 10px;
      margin-top: 20px;
    }
  }
}
</style>